<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>编辑资料</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><!-- 图标 -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet">
    <link rel="stylesheet" href="./css/移动端页面功能.css">
</head>
<style>
    .EditorTd img {
        width: 50px;
        height: 50px;
    }
    .TOTAL{
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
    }
    .pictures{
        width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none; /* 使用 Flexbox 布局 */
        flex-direction: column; /* 子项目垂直排列 */
    }
</style>
<body>
<header>
    <a href="javascript:history.back(-1)"><i class="bx bx-chevron-left"></i></a>
    <h2>编辑资料</h2>
</header>
<table>
    <tr>
        <td class="EditorTd" id="picture">头像<span><img
                src="${user.userimg == null ? './img/7e72c58637ff26df68fb30939de078d2bbbfcdbe.jpg' : user.userimg}" alt="" style="object-fit: cover" id="userimg"></span><i
                class='bx bx-chevron-right iColorBlack' ></i>
            <hr>
        </td>
    </tr>
    <tr>
        <td class="EditorTd" id="username">昵称<span>${user.username}</span><i class='bx bx-chevron-right iColorBlack'></i>
            <hr>
        </td>
    </tr>
    <tr>
        <td class="EditorTd" id="gender">性别<span>${user.gender}</span><i class='bx bx-chevron-right iColorBlack'></i>
            <hr>
        </td>
    </tr>
    <tr>
        <td class="EditorTd" id="signature">个人签名<span>${user.signature}</span><i class='bx bx-chevron-right iColorBlack'></i></td>
    </tr>
</table>
<div class="TOTAL">
    <div class="pictures">
        <img src="" alt="" id="zhanshi" width="200px" height="200px" style="object-fit: cover">
        <input type="file" id="imageLoader" style="width: 100%;margin-bottom: 5px;margin-top: 5px">
        <input type="submit" onclick="getHtml()" style="width: 100%" value="保存">
    </div>
    <div class="pictures">
        <input type="text" name="username" value="${user.username}">
        <input type="submit" onclick="getHtml()" style="width: 100%" value="保存">
    </div>
    <div class="pictures">
        <input type="text" name="gender" value="${user.gender}">
        <input type="submit" onclick="getHtml()" style="width: 100%" value="保存">
    </div>
    <div class="pictures">
        <input type="text" name="signature" value="${user.signature}">
        <input type="submit" onclick="getHtml()" style="width: 100%" value="保存">
    </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var TOTLA = document.querySelector('.TOTAL')
    var pictures = document.querySelectorAll('.pictures')
    var picture = document.getElementById('picture')
    picture.addEventListener('click', function () {
        TOTLA.style.display = 'block'
        pictures.forEach(function (picture) {
            picture.style.display = 'none';
        })
        pictures[0].style.display = 'flex';
    })

    var username = document.getElementById('username')
    username.addEventListener('click', function () {
        TOTLA.style.display = 'block'
        pictures.forEach(function (picture) {
            picture.style.display = 'none';
        })
        pictures[1].style.display = 'flex';
    })

    var gender = document.getElementById('gender')
    gender.addEventListener('click', function () {
        TOTLA.style.display = 'block'
        pictures.forEach(function (picture) {
            picture.style.display = 'none';
        })
        pictures[2].style.display = 'flex';
    })

    var signature = document.getElementById('signature')
    signature.addEventListener('click', function () {
        TOTLA.style.display = 'block'
        pictures.forEach(function (picture) {
            picture.style.display = 'none';
        })
        pictures[3].style.display = 'flex';
    })

    window.onclick = function (event) {
        if (event.target === TOTLA) {
            TOTLA.style.display = 'none'
        }
    }



    var imageLoader = document.getElementById('imageLoader');
    var base64String = null;
    imageLoader.addEventListener('change', function () {
        var file = imageLoader.files[0];
        var reader = new FileReader();
        reader.onload = function () {
            // 将Base64编码的字符串设置为图片的src属性
            base64String = reader.result;
            var pic = document.getElementById('zhanshi')
            pic.src = base64String;
            console.log('tupian ' + base64String)
        }
        reader.readAsDataURL(file); // 读取文件内容并转换为Base64
    });

    function getHtml() {
        var Newusername = document.getElementsByName('username')[0].value;
        console.log('username ' + Newusername)
        var Newgender = document.getElementsByName('gender')[0].value;
        console.log('gender ' + Newgender)
        var Newsignature = document.getElementsByName('signature')[0].value
        console.log('signature ' + Newsignature)
        var Newuserimage = base64String ? base64String : '${user.userimg}';
        console.log('userimg ' + Newuserimage)
        alert('保存成功')

        // 发送AJAX请求到服务器
        $.ajax({
            type: "POST",
            url: "changeuserimage.jsp", // 服务器端处理页面
            data: {
                username: Newusername,
                gender: Newgender,
                signature: Newsignature,
                userimg: Newuserimage,
                flag: "true"
            },
        });
    }

</script>
</html>